<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>注册_资源共享平台</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <style type="text/css">
        .layui-container {
            max-width: 600px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <form class="layui-form" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="username" placeholder="请输入用户名" class="layui-input" lay-verify="required|username" lay-reqText="请输入用户名" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密&nbsp;&nbsp;码：</label>
            <div class="layui-input-block">
                <input type="password" id="password" name="password" placeholder="请输入密码" class="layui-input" lay-verify="required|password" lay-reqText="请输入密码" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码：</label>
            <div class="layui-input-block">
                <input type="password" id="password2" placeholder="请再次输入密码" class="layui-input" lay-verify="required|password" lay-reqText="请输入确认密码" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮&nbsp;&nbsp;箱：</label>
            <div class="layui-input-block">
                <input type="text" name="email" placeholder="请输入邮箱" class="layui-input" lay-verify="required|email" lay-reqText="请输入邮箱" />
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="sbtn" class="layui-btn" lay-submit="" lay-filter="*">注册</button>
                &nbsp;&nbsp;<label id="errorInfo" style="color: red;"></label>
            </div>
        </div>
    </form>
</div>

<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['layer', 'form'], function () {
        let $ = layui.jquery,
            layer = layui.layer,
            form = layui.form;

        // 定义验证规则
        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }
            },
            password: function (value, item) {
                if (!/^[\S]{6,12}$/.test(value)) {
                    return '密码必须6到12位，且不能出现空格';
                }
                if ($("#password").val().trim() != $("#password2").val().trim()) {
                    return "两次密码不一致！";
                }
            }
        });

        // 监听提交
        form.on('submit(*)', function (data) {
            $("#errorInfo").text("");

            var index = layer.load(0, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });

            $("#sbtn").attr('disabled', true);

            $.post("/user/register", data.field, function (result) {
                layer.close(index);
                $("#sbtn").attr('disabled', false);
                if (result.success) {
                    layer.alert("恭喜您，注册成功！");
                    location.href = "/login.html";
                } else {
                    $("#errorInfo").text(result.errorInfo);
                }
            }, "json");
        });
    });
</script>
</body>
</html>